<!DOCTYPE HTML>
<!--
	Future Imperfect by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>

		<title>Future Imperfect by HTML5 UP</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!--[if lte IE 8]>
		<script src="../static/assets/js/ie/html5shiv.js"></script><![endif]-->
		<link rel="stylesheet" href="static/assets/css/main.css" />
		<!--[if lte IE 9]>
		<link rel="stylesheet" href="../static/assets/css/ie9.css"/><![endif]-->
		<!--[if lte IE 8]>
		<link rel="stylesheet" href="../static/assets/css/ie8.css"/><![endif]-->

        <script src="static/assets/js/jquery.min.js"></script>

        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
        <script>

            function search_main(){
                var url = "/main";
                var keyword = $(".author").val();
                if(keyword == null || keyword.length == 0 ){
                    return;
                }
                window.location.href = "/person?keyword="+keyword;
            }

            function  search_type_select(search_type) {
                $(".search_type").val(search_type);
                if (search_type == "人物"){
                    $(".search_txt").html("当前检索类型：人物");
                }else if(search_type == "机构"){
                    $(".search_txt").html("当前检索类型：机构");
                }else if(search_type == "领域"){
                    $(".search_txt").html("当前检索类型：领域");
                }
            }

        </script>
	</head>

	<body>

    <input class="keyword_global" type="hidden" value="${keyword}"/>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Header -->
					<header id="header">
						<h1><a href="#">科技资源检索系统</a></h1>
						<nav class="links">
							<ul>
                                <ul>
                                    <li><a class="person_type" href="#" onclick="search_type_select('人物')">人物</a></li>
                                    <li><a class="organization_type" href="#" onclick="search_type_select('机构')">机构</a></li>
                                    <li><a class="field_type" href="#" onclick="search_type_select('领域')">领域</a></li>
                                    <li><a class="search_txt" href="#"></a></li>
                                </ul>
							</ul>
						</nav>
						<nav class="main">
							<ul>
								<li class="search">
									<a class="fa-search" href="#search" onclick="search_main()">Search</a>
									<form id="search" method="post" action="#">
										<input class="author" type="text" name="query" placeholder="Search"/>
									</form>
								</li>
								<li class="menu">
									<a class="fa-bars" href="#menu">Menu</a>
								</li>

							</ul>
						</nav>
					</header>


				<!-- Main -->
					<div id="main">

						<!-- Post -->
							<article class="post">
								<header>
									<div class="title">
										<h2><a href="#">${personDetail.person.name}</a></h2>
										<p>${personDetail.person.organization}&nbsp;&nbsp;&nbsp;&nbsp;</p>
                                        <p>
                                        <#if personDetail.person.degree?exists>
                                            <#list personDetail.person.degree as key>
                                                <tr>
                                                    <td>${key}</td>
                                                </tr>
                                            </#list>
                                        </#if>

                                        </p>
                                        <p>
                                            <#if personDetail.otherPerson[0]?exists>
                                            候选同名人物：
                                            </#if>
                                        </p>
                                        <p>
                                            <#if personDetail.otherPerson?exists>
                                                <#list personDetail.otherPerson as person>
                                                    <tr>
                                                        <td>${person.organization} </td>
                                                    </tr>
                                                </#list>
                                            </#if>
                                        </p>
									</div>
									<div class="meta">
										<time class="published" datetime="">2018 年 4 月 14 日</time>
										<a href="#" class="author"><span class="name">叶志文 邢瑞 吴与伦</span><img src="static/images/avatar.jpg" alt="" /></a>
									</div>
								</header>

                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="word_cloud" style="width=600px;height:400px;"></div>

                                <script type="text/javascript">
                                    // 路径配置
                                    require.config({
                                        paths: {
                                            echarts: 'http://echarts.baidu.com/build/dist'
                                        }
                                    });

                                    // 使用
                                    require(
                                            [
                                                'echarts',
                                                'echarts/chart/wordCloud'
                                            ],

                                            function (ec) {
                                                function createRandomItemStyle() {
                                                    return {
                                                        normal: {
                                                            color: 'rgb(' + [
                                                                Math.round(Math.random() * 160),
                                                                Math.round(Math.random() * 160),
                                                                Math.round(Math.random() * 160)
                                                            ].join(',') + ')'
                                                        }
                                                    };
                                                }
                                                // 基于准备好的dom，初始化echarts图表
                                                var myChart = ec.init(document.getElementById('word_cloud'));

                                                option = {
                                                    title: {
                                                        text: '研究领域',
                                                        link: 'http://www.google.com/trends/hottrends'
                                                    },
                                                    tooltip: {
                                                        show: true
                                                    },
                                                    series: [{
                                                        name: '研究领域',
                                                        type: 'wordCloud',
                                                        size: ['80%', '80%'],
                                                        textRotation : [0, 45, 90, -45],
                                                        textPadding: 0,
                                                        autoSize: {
                                                            enable: true,
                                                            minSize: 14
                                                        },
                                                        data: [
                                                        ]
                                                    }]
                                                };

                                                var wordCloud = '${personDetail.person.wordClouds}';
                                                var wordCloudObject = JSON.parse(wordCloud);
                                                option.series[0].data = wordCloudObject;

                                                // 为echarts对象加载数据
                                                myChart.setOption(option);
                                            }
                                    );
                                </script>


                                        <#if personDetail.person.experience?exists>
                                            <p>${personDetail.person.experience}</p>
                                        </#if>

								<footer>
									<ul class="actions">
										<li><a href="#" class="button big">Continue Reading</a></li>
									</ul>
									<ul class="stats">
										<li><a href="#">General</a></li>
										<li><a href="#" class="icon fa-heart">28</a></li>
										<li><a href="#" class="icon fa-comment">128</a></li>
									</ul>
								</footer>
							</article>

						<!-- Post -->
							<article class="post">
								<header>
									<div class="title">
										<h2><a href="#">人物关系网络</a></h2>
										<p>学术合作关系 & 领域相似关系</p>
									</div>
									<div class="meta">
										<time class="published" datetime="">2018 年 4 月 14 日</time>
										<a href="#" class="author"><span class="name">叶志文 邢瑞 吴与伦</span><img src="static/images/avatar.jpg" alt="" /></a>
									</div>
								</header>
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="mytest" style="width=1000px;height:600px;"></div>

                                <script type="text/javascript">
                                    // 路径配置
                                    require.config({
                                        paths: {
                                            echarts: 'http://echarts.baidu.com/build/dist'
                                        }
                                    });

                                    // 使用
                                    require(
                                            [
                                                'echarts',
                                                'echarts/chart/chord',
                                                'echarts/chart/force',
                                            ],
                                            function (ec) {
                                                // 基于准备好的dom，初始化echarts图表
                                                var myChart = ec.init(document.getElementById('mytest'));

                                                option = {
                                                    title : {
                                                        text: '人物关系',
                                                        subtext: '数据来自万方',
                                                        x:'right',
                                                        y:'bottom'
                                                    },
                                                    tooltip : {
                                                        trigger: 'item',
                                                        formatter: '{a} : {b}'
                                                    },
                                                    toolbox: {
                                                        show : true,
                                                        feature : {
                                                            restore : {show: true},
                                                            magicType: {show: true, type: ['force', 'chord']},
                                                            saveAsImage : {show: true}
                                                        }
                                                    },
                                                    legend: {
                                                        x: 'left',
                                                        data:['人物','学术合作关系']
                                                    },
                                                    series : [
                                                        {
                                                            type:'force',
                                                            name : "人物关系",
                                                            ribbonType: false,
                                                            categories : [
                                                                {
                                                                    name: '人物'
                                                                },
                                                                {
                                                                    name: '学术合作关系'
                                                                }
                                                            ],
                                                            itemStyle: {
                                                                normal: {
                                                                    label: {
                                                                        show: true,
                                                                        textStyle: {
                                                                            color: '#333'
                                                                        }
                                                                    },
                                                                    nodeStyle : {
                                                                        brushType : 'both',
                                                                        borderColor : 'rgba(255,215,0,0.4)',
                                                                        borderWidth : 1
                                                                    },
                                                                    linkStyle: {
                                                                        type: 'curve'
                                                                    }
                                                                },
                                                                emphasis: {
                                                                    label: {
                                                                        show: false
                                                                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                                                                    },
                                                                    nodeStyle : {
                                                                        //r: 30
                                                                    },
                                                                    linkStyle : {}
                                                                }
                                                            },
                                                            useWorker: false,
                                                            minRadius : 15,
                                                            maxRadius : 25,
                                                            gravity: 1.1,
                                                            scaling: 1.1,
                                                            roam: 'move',
                                                            nodes:[

                                                            ],
                                                            links : [

                                                            ]
                                                        }
                                                    ]
                                                };

                                                var keyword = $(".keyword_global").val();
                                                var name = keyword.split(" ")[0];
                                                var organization = keyword.split(" ")[1];

                                                var url = "/getPaperRelationByName";
                                                var relationdata;

                                                $.ajax({
                                                    type: 'POST',
                                                    async:false,
                                                    url: url,
                                                    data:JSON.stringify({'name': name,'organization':organization}),
                                                    dataType: 'json',
                                                    contentType: "application/json",
                                                    success: function(data){
                                                        relationdata = data;
                                                    }});

                                                var ecConfig = require('echarts/config');

                                                function focus(param) {
                                                    var data = param.data;
                                                    var links = option.series[0].links;
                                                    var nodes = option.series[0].nodes;
                                                    if (
                                                            data.source !== undefined
                                                            && data.target !== undefined
                                                    ) { //点击的是边
                                                        var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];
                                                        var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];
                                                        console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
                                                    } else { // 点击的是点
                                                        console.log("选中了" + data.name + '(' + data.value + ')');
                                                    }
                                                }
                                                myChart.on(ecConfig.EVENT.CLICK, focus)

                                                myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {
                                                    console.log(myChart.chart.force.getPosition());
                                                });

                                                option.series[0].links = relationdata.links;
                                                option.series[0].nodes = relationdata.nodes;
                                                // 为echarts对象加载数据
                                                myChart.setOption(option);
                                            }
                                    );
                                </script>
								<footer>
									<ul class="actions">
										<li><a href="#" class="button big">Continue Reading</a></li>
									</ul>
									<ul class="stats">
										<li><a href="#">General</a></li>
										<li><a href="#" class="icon fa-heart">28</a></li>
										<li><a href="#" class="icon fa-comment">128</a></li>
									</ul>
								</footer>
							</article>

						<!-- Post -->
							<article class="post">
								<header>
									<div class="title">
										<h2><a href="#">科技成果产出曲线图</a></h2>
										<p>Lorem ipsum dolor amet nullam consequat etiam feugiat</p>
									</div>
									<div class="meta">
										<time class="published" datetime="2015-10-22">October 22, 2015</time>
										<a href="#" class="author"><span class="name">Jane Doe</span><img src="static/images/avatar.jpg" alt="" /></a>
									</div>
								</header>

                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="mytest2" style="width=500px;height:500px;"></div>

                                <script type="text/javascript">
                                    // 路径配置
                                    require.config({
                                        paths: {
                                            echarts: 'http://echarts.baidu.com/build/dist'
                                        }
                                    });

                                    // 使用
                                    require(
                                            [
                                                'echarts',
                                                'echarts/chart/bar',
                                                'echarts/chart/line'
                                            ],
                                            function (ec) {
                                                // 基于准备好的dom，初始化echarts图表
                                                var myChart = ec.init(document.getElementById('mytest2'));

                                                option = {
                                                    title : {
                                                        text: '专家科技文献成果产出变化',
                                                        subtext: '统计方法'
                                                    },
                                                    tooltip : {
                                                        trigger: 'axis'
                                                    },
                                                    legend: {
                                                        data:['论文产出']
                                                    },
                                                    toolbox: {
                                                        show : true,
                                                        feature : {
                                                            mark : {show: true},
                                                            dataView : {show: true, readOnly: false},
                                                            magicType : {show: true, type: ['line', 'bar']},
                                                            restore : {show: true},
                                                            saveAsImage : {show: true}
                                                        }
                                                    },
                                                    calculable : true,
                                                    xAxis : [
                                                        {
                                                            type : 'category',
                                                            boundaryGap : false,
                                                            data : ['2000','2002','2004','2006','2008','2010','2012']
                                                        }
                                                    ],
                                                    yAxis : [
                                                        {
                                                            type : 'value',
                                                            axisLabel : {
                                                                formatter: '{value} 篇'
                                                            }
                                                        }
                                                    ],
                                                    series : [
                                                        {
                                                            name:'论文产出',
                                                            type:'line',
                                                            data:[11, 11, 15, 13, 12, 13, 10],
                                                            markPoint : {
                                                                data : [
                                                                    {type : 'max', name: '最大值'},
                                                                    {type : 'min', name: '最小值'}
                                                                ]
                                                            },
                                                            markLine : {
                                                                data : [
                                                                    {type : 'average', name: '平均值'}
                                                                ]
                                                            }
                                                        }
                                                    ]
                                                };

                                                var keyword = $(".keyword_global").val();
                                                var name = keyword.split(" ")[0];
                                                var organization = keyword.split(" ")[1];

                                                var url = "/getPaperChatByName";
                                                var keys = [];
                                                var values = [];

                                                $.ajax({
                                                    type: 'POST',
                                                    async:false,
                                                    url: url,
                                                    data:JSON.stringify({'name': name,'organization':organization}),
                                                    dataType: 'json',
                                                    contentType: "application/json",
                                                    success: function(data){

                                                        for(var key in data){
                                                            keys.push(key);
                                                            values.push(data[key]);
                                                            //console.log("属性：" + key + ",值：" + map[key]);
                                                        }
                                                    }});
                                                option.series[0].data = values;
                                                option.xAxis[0].data = keys;
                                                // 为echarts对象加载数据
                                                myChart.setOption(option);
                                            }
                                    );
                                </script>

								<footer>
									<ul class="actions">
										<li><a href="#" class="button big">Continue Reading</a></li>
									</ul>
									<ul class="stats">
										<li><a href="#">General</a></li>
										<li><a href="#" class="icon fa-heart">28</a></li>
										<li><a href="#" class="icon fa-comment">128</a></li>
									</ul>
								</footer>
							</article>

						<!-- Pagination -->
							<ul class="actions pagination">
								<li><a href="" class="disabled button big previous">Previous Page</a></li>
								<li><a href="#" class="button big next">Next Page</a></li>
							</ul>

					</div>

				<!-- Sidebar -->
					<section id="sidebar">

						<!-- Intro -->
							<section id="intro">
								<a href="#" class="logo"><img src="static/images/logo.jpg" alt="" /></a>
								<header>
									<h2>科技资源检索系统</h2>
									<p> paper list</p>
								</header>
							</section>

						<!-- Mini Posts -->
							<section>
								<div class="mini-posts paperlist">

								</div>
							</section>

						<!-- Posts List -->
							<section>
								<ul class="posts">
									<li>
										<article>
											<header>
												<h3><a href="#">Lorem ipsum fermentum ut nisl vitae</a></h3>
												<time class="published" datetime="2015-10-20">October 20, 2015</time>
											</header>
											<a href="#" class="image"><img src="static/images/pic08.jpg" alt="" /></a>
										</article>
									</li>
									<li>
										<article>
											<header>
												<h3><a href="#">Convallis maximus nisl mattis nunc id lorem</a></h3>
												<time class="published" datetime="2015-10-15">October 15, 2015</time>
											</header>
											<a href="#" class="image"><img src="static/images/pic09.jpg" alt="" /></a>
										</article>
									</li>
									<li>
										<article>
											<header>
												<h3><a href="#">Euismod amet placerat vivamus porttitor</a></h3>
												<time class="published" datetime="2015-10-10">October 10, 2015</time>
											</header>
											<a href="#" class="image"><img src="static/images/pic10.jpg" alt="" /></a>
										</article>
									</li>
									<li>
										<article>
											<header>
												<h3><a href="#">Magna enim accumsan tortor cursus ultricies</a></h3>
												<time class="published" datetime="2015-10-08">October 8, 2015</time>
											</header>
											<a href="#" class="image"><img src="static/images/pic11.jpg" alt="" /></a>
										</article>
									</li>
									<li>
										<article>
											<header>
												<h3><a href="#">Congue ullam corper lorem ipsum dolor</a></h3>
												<time class="published" datetime="2015-10-06">October 7, 2015</time>
											</header>
											<a href="#" class="image"><img src="static/images/pic12.jpg" alt="" /></a>
										</article>
									</li>
								</ul>
							</section>

						<!-- About -->
							<section class="blurb">
								<h2>About</h2>
								<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod amet placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at phasellus sed ultricies.</p>
								<ul class="actions">
									<li><a href="#" class="button">Learn More</a></li>
								</ul>
							</section>

						<!-- Footer -->
							<section id="footer">
								<ul class="icons">
									<li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
									<li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
									<li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
									<li><a href="#" class="fa-rss"><span class="label">RSS</span></a></li>
									<li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
								</ul>
								<p class="copyright">&copy; Untitled. Design: <a href="http://html5up.net">HTML5 UP</a>. Images: <a href="http://unsplash.com">Unsplash</a>.</p>
							</section>

					</section>

			</div>

		<!-- Scripts -->
			<script src="static/assets/js/skel.min.js"></script>
			<script src="static/assets/js/util.js"></script>
			<!--[if lte IE 8]>
		<script src="../static/assets/js/ie/respond.min.js"></script><![endif]-->
			<script src="static/assets/js/main.js"></script>
    <script>
        function findPaperListByAuthorAndOrg() {
            ///paper/findPaperListByAuthorAndOrg
            var url = "/paper/findPaperListByAuthorAndOrg";
            var keyword = $(".keyword_global").val();
            var author = keyword.split(" ")[0];
            var organization = keyword.split(" ")[1];
            if(author == null || author.length == 0 ){
                return;
            }
            $.ajax({
                type: 'POST',
                url: url,
                data:JSON.stringify({'author': author,'organization':organization}),
                dataType: 'json',
                contentType: "application/json",
                success: function(data){
                    //alert(""+data.length);

                    for(var i=0;i<data.length;i++){
                        $(".paperlist").append(
                            '<article class="mini-post"><header><h3>'+
                            '<a href="#">'+data[i].title_cn+'</a></h3>'+
                            '<time class="published" datetime="">'+data[i].year+'</time>'+
                            '<a href="#" class="author"><img src="static/images/avatar.jpg" alt="" /></a></header></article>'
                        );
                    }
                }});
        }

        $(document).ready(function (){
            findPaperListByAuthorAndOrg();

        });
    </script>

	</body>
</html>